@import './base.less';

.@{css-prefix}.form {
  //padding: @padding-horizontal;
  //margin: 0em -1px;
  width: 100%;

  &.inline {
    .field {
      display: inline-block;
      margin-right: .8em;
      margin-bottom: 0;
    }
  }

  .fields {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    .flex-direction(row);
    margin: 0 -.5em 1em;

    > .field {
      -webkit-box-flex: 0;
      .flex(0 1 auto);
      padding-left: .5em;
      padding-right: .5em;
      margin: 0;
    }

  }

  .field {
    display: block;
    font-size: 1em;
    margin: 0 0 1em;

    &.disabled {
      .disabled;
    }

    &.required {
      .label:after {
        margin: 0 0 0 .3em;
        content: '*';
        color: @error-color;
        //display: inline-block;
      }
    }

    &.inline {
      //display: inline-block;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;

      > label {
        display: inline-block;
        margin: 0 1em 0 0;
      }

      &.error .tip {
        margin-left: 0.6em;
      }
    }

    .@{css-prefix}.input, input, .select {
      width: 100%!important;
    }

    > label {
      display: block;
      margin: 0em 0em 0.3rem 0em;
      font-weight: bold;
      text-align: left;
      vertical-align: middle;
      text-transform: none;
    }

    .radios, .checkboxes {
      padding: @input-padding-vertical 0;
    }

    .input.number .step {
      height: calc(~"100% - 3px");
    }

    &.error {
      .tip {
        color: @error-color;
        font-size: .9em;
      }
      input, .select {
        border-color: @error-color;
      }
    }

  }
}
